{% extends 'layout/manage.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.preview.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/popover.css' %}">
    <style>
        .title-list {
            border-right: 1px solid #3c3c3c;
            min-height: 500px;
            margin-left: -30px;
        }

        .content {
            border-left: 1px solid #3c3c3c;
            min-height: 600px;
            margin-left: -1px;
        }

        .function {
            float: right;
            margin-right: 20px;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-project">
            <div class="panel-heading"><i class="fa fa-book" aria-hidden="true" style="margin-right: 5px"></i>Wiki文档
                <div class="function poptd">
                    <a type="button" class="btn btn-success btn-xs"
                       href="{% url 'wiki_add' project_id=request.tracer.project.id %}">
                        <i class="fa fa-plus-circle" aria-hidden="true"> 新建</i>
                    </a>
                    {% if wiki_object %}
                        <a type="button" class="btn btn-primary btn-xs" style="margin-left: 5px"
                           href="{% url 'wiki_edit' project_id=request.tracer.project.id wiki_id=wiki_object.id %}">
                            <i class="fa fa-edit" aria-hidden="true"> 编辑</i>
                        </a>
                        <a class="btn btn-danger btn-xs pop-user" style="margin-left: 5px"
                           data-toggle="popover" data-html="true" data-placement="bottom">
                            <i class="fa fa-trash" aria-hidden="true"> 删除</i>
                        </a>
                        <a href="{% url 'wiki' project_id=request.tracer.project.id %}"
                           style="margin-left: 30px; color: #d7d7d7">
                            <i class="fa fa-chevron-left" aria-hidden="true"></i> 返回</i>
                        </a>
                    {% endif %}
                </div>
            </div>

            <!-- 删除订单对话框 -->
            <div class="popover fade">
                <div id="popover-title">
                    <h5>确认删除</h5>
                </div>
                <div id="popover-element">
                    <p>点击确定后，所有关联的数据都将被删除</p>
                    <a class="btn btn-danger btn-xs btnDelWiki">确定</a>
                </div>
            </div>

            <div class="panel-body">
                <div class="col-sm-3 title-list">
                    <ul id="catalog">

                    </ul>
                </div>
                <div class="col-sm-9 content">
                    <div>
                        {% if wiki_object %}
                            <div id="previewMarkdown">
                                <textarea>
                                    {{ wiki_object.content }}
                                </textarea>
                            </div>

                        {% else %}
                            <div style="text-align: center">
                                <h4> 《{{ request.tracer.project.name }}》 wiki文档库</h4>
                                <a href="{% url 'wiki_add' project_id=request.tracer.project.id %}"><i
                                        class="fa fa-plus-circle"
                                        aria-hidden="true"></i>
                                    新建文章</a>
                            </div>

                        {% endif %}


                    </div>
                </div>
            </div>
        </div>


    </div>


{% endblock %}
{% block js %}
    <script src="{% static 'plugins/editor-md/editormd.amd.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/marked.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/raphael.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/jquery.flowchart.min.js' %}"></script>
    <script src="{% static 'js/popover.js' %}"></script>
    <script>

        var WIKI_DETAIL_URL = '{% url 'wiki' project_id=request.tracer.project.id %}';
        $(function () {
            initCatalog();
            initPreviewMd();
            bindBtnSms();
            popover();
        })

        function initPreviewMd(){
            editormd.markdownToHTML("previewMarkdown", {
                htmlDebode: 'style, script, iframe'
            })
        }

        function bindBtnSms() {
            $('#btnSubmit').click(function () {
                $.ajax({
                    url: '{% url 'wiki' project_id=request.tracer.project.id %}',
                    method: 'post',
                    data: $('#addform').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        }

        function initCatalog() {
            $.ajax({
                url: '{% url "wiki_catalog" project_id=request.tracer.project.id %}',
                method: 'get',
                datatype: 'JSON',
                success: function (res) {
                    console.log(res);
                    if (res.status) {
                        $.each(res.data, function (index, item) {
                            // item=[1, xx, null], index=1,2,3...
                            console.log('initCatalog, ', item.title)
                            //  <li><a>目录2</a></li>
                            // 添加到catalog
                            var li = $("<li>").attr('id', 'id_' + item.id).append($('<a>').text(item.title).attr('href', WIKI_DETAIL_URL + '?wiki_id=' + item.id)).append('<ul>');
                            if (!item.parent_id) {
                                $('#catalog').append(li);
                            } else {
                                $('#id_' + item.parent_id).children('ul').append(li);
                            }
                        })
                    } else {
                        alert('初始化目录失败');
                    }
                }
            })
        }

        function popover() {
            $(".pop-user").click(function () {
                console.log('666');
                $(this).popover({
                    animation: true,
                    trigger: 'manual',
                    title: $('#popover-title').html(),
                    content: $('#popover-element').html(),
                })
                $(this).popover("show")

                {% if wiki_object %}
                    $('.btnDelWiki').click(function () {
                        //删除文章
                        $.ajax({
                            url: '{% url "wiki_delete" project_id=request.tracer.project.id wiki_id=wiki_object.id %}?rdstr={{ request.tracer.rdstr }}',
                            method: 'get',
                            dataType: 'JSON',
                            success: function (res) {
                                console.log(res)
                                if (res.status) {
                                    $('#catalog').children().remove();  //删除文章后将目录清除，重新加载
                                    initCatalog();
                                } else {
                                    location.href = 'manage_error.html'
                                }
                            }
                        })
                    })
                {% endif %}
                $(".poptd").mouseleave(function () {
                    $(".popover").popover('hide');
                })

            })
        }


        console.log({{ wiki_object.id }})

    </script>
{% endblock %}